<!--
 * @Author: ying
 * @Date: 2021-08-05 13:53:24
 * @LastEditTime: 2021-10-26 11:04:07
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \inventory-apie:\hjimi\人脸辨识云\html\gitlab\pc\faceCloudWebsite\src\views\face-recognition\resource-manage\resource-pay\resourcePay.vue
-->
<style lang="scss" scoped>
.pay_step {
  position: fixed;
  height: 50px;
  top: 113px;
  background: #fff;
  width: 100%;
  margin-left: -25px;
  z-index: 100;
  border-bottom: 1px #f5f5f5 !important;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 5%), 0 0 3px 0 rgb(0 0 0 / 4%);
  .ant-steps {
    width: 400px;
    position: absolute;
    right: 230px;
    bottom: 14px;
  }
}
.pay_box {
  margin-top: 50px;
  .pay_tit_txt {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.85);
  }
  .pay_type_radio {
    margin-top: 8px;
    .ant-radio-button-wrapper {
      height: 40px;
      line-height: 40px;
    }
  }
  .pay_type_content_box {
    margin-top: 28px;
    ::v-deep .ant-form {
      .ant-form-item {
        .ant-form-item-label {
          .ant-form-item-required {
            &::before {
              display: none;
            }
          }
        }
      }
    }
  }

  // confirm
  .pay_confirm_order {
    overflow: hidden;
    .pay_confirm_money {
      float: right;
      .product_money,
      .product_discount,
      .product_actual {
        font-size: 14px;
        line-height: 25px;
      }
      .product_money {
        margin-top: 25px;
      }
    }
    .pay_confirm_protocol {
      margin-top: 100px;
      span {
        margin-top: 29px;
        height: 14px;
        float: right;
        font-size: 14px;
        color: #1890ff;
        margin-right: -5px;
      }
    }
    .pay_confirm_action {
      float: right;
      width: 100%;
      margin-top: 20px;
      .action_inner {
        float: right;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .back {
          color: #1890ff;
          font-size: 14px;
        }
      }
    }
  }
  // order
  .pay_order {
    overflow: hidden;
    .pay_order_title {
      margin-top: 24px;
      margin-bottom: 24px;
    }
    .pay_confirm_money {
      float: right;
      .product_money,
      .product_discount,
      .product_actual {
        font-size: 14px;
        line-height: 25px;
      }
      .product_money {
        margin-top: 25px;
      }
    }
    .pay_type {
      margin-top: 165px;
      position: relative;
      height: 120px;

      ::v-deep .ant-radio-group {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        .ant-radio-wrapper {
          margin-right: 40px;
        }
      }

      .pay_type_action {
        position: absolute;
        bottom: 0px;
        right: 0px;
        .pay_type_action_inner {
          display: flex;
          align-items: center;
          width: 300px;
          justify-content: space-between;
          .back {
            color: #1890ff;
            cursor: pointer;
          }
          .cancel {
            color: #bcbcbc;
            cursor: pointer;
          }
        }
      }
    }
  }
  // result
  .pay_result {
    ::v-deep .ant-result {
      padding-top: 10px;
      padding-bottom: 20px;
      .ant-divider {
        &::before,
        &::after {
          transform: translateY(0%);
        }
      }
    }
  }
  .pay_result_info {
    margin-top: 5px;
    margin-bottom: 24px;
  }
  overflow: hidden;
  .pay_confirm_money {
    float: right;
    .product_money,
    .product_discount,
    .product_actual {
      font-size: 14px;
      line-height: 25px;
    }
    .product_money {
      margin-top: 25px;
    }
  }

  // pay
  .pay_container {
    height: 61px;
    background: #fff;
    margin-top: -24px;
    margin-left: -24px;
    margin-right: -24px;
    position: relative;
    .pay_container_logo {
      display: flex;
      align-items: center;
      margin: 0 auto;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      img {
        width: 60px;
        height: 61px;
        margin-right: 15px;
      }
    }
  }
  .pay_container_info {
    margin: 50px auto 100px;
    width: 850px;
    height: 350px;
    background: url("../../../../assets/image/pay_bg.png");
    background-size: 100% 100%;
    overflow: hidden;
    .pay_info_top {
      margin-top: 30px;
      margin-left: 94px;
      font-size: 15px;
      color: #000;
    }
    .pay_info_mid {
      margin: 20px auto 0px;
      height: 215px;
      padding: 0 70px;
      display: flex;
      align-items: center;
      .left {
        width: 175px;
        height: 175px;
      }
      .right {
        margin-left: 50px;
        .right_item {
          line-height: 30px;
          .right_name {
            color: #000;
          }
        }
        .right_item:last-child {
          margin-bottom: 30px;
        }
      }
    }
    .pay_info_bottom {
      margin-top: 27px;
      text-align: center;
      color: #ccc;
    }
  }
}

.pay_drawer {
  ::v-deep .ant-drawer-mask {
    background: rgba(256, 256, 256, 0) !important;
  }
  ::v-deep .ant-drawer-content-wrapper {
    width: 270px !important;
    position: absolute;
    top: 180px;
    right: 0px;
    .ant-drawer-content {
      background: #fafafa;
      .ant-drawer-body {
        padding: 0 !important;
        .cart_item_fa {
          height: 680px;
          overflow-y: auto;
          .cart_item {
            width: 270px;
            height: 160px;
            background: #fff;
            margin-top: 24px;
            padding: 24px 16px;
            .cart_item_title {
              font-size: 14px;
              color: #000;
              margin-bottom: 10px;
              display: flex;
              align-items: center;
              .clear {
                height: 21px;
                line-height: 21px;
                color: #1890ff;
                font-size: 12px;
                margin-left: 75px;
                cursor: pointer;
              }
            }
            .cart_item_option {
              margin-bottom: 5px;
              font-size: 13px;
              .cart_item_option_left {
                color: #a7a3a3;
                margin-right: 24px;
              }
              .cart_item_option_right {
                color: #000;
              }
            }
          }
        }

        .cart_bottom {
          position: absolute;
          height: 52px;
          bottom: 180px;
          width: 100%;
          border-top: 1px solid #e8e8e8;
          left: 0;
          right: 0;
          background: #fff;
          display: flex;
          align-items: center;
          justify-content: space-around;
          .cart_bottom_total {
            font-size: 16px;
            color: #faad14;
          }
        }
      }
    }
    .ant-drawer-title {
      .drawer_title {
        margin-left: 10px;
        color: #a7a3a3;
      }
    }
  }
}
</style>
<template>
  <div class="app_container">
    <div class="pay_step">
      <a-steps :current="stepValue" size="small">
        <a-step title="填写订单" />
        <a-step title="确认订单" />
        <a-step title="支付订单" />
        <a-step title="购买成功" />
      </a-steps>
    </div>
   <a-spin :spinning="spinning" tip="加载中...">
    <div class="pay_box box_style" v-show="stepValue == 0">
      <div class="pay_tit_txt">计费方式：</div>
      <div class="pay_type_radio">
        <a-radio-group size="small" v-model="typeRadioValue" button-style="solid" @change="handleToChangeTypeRadioValue">
          <a-radio-button value="2">调用量计费</a-radio-button>
          <a-radio-button value="1">QPS计费</a-radio-button>
        </a-radio-group>
      </div>
      
      <div class="pay_type_content_box">
        <div v-if="typeRadioValue == '2'">
          <a-form :form="form" layout="vertical" class="pay_type_form">
            <a-form-item label="选择接口：">
              <a-select v-decorator="['baseService']" class="mr20" placeholder="请选择服务" style="width: 208px;">
                <a-select-option v-for="(item, index) in billingForResourceData.selectObj.baseList" :value="item.key" :key="index" @click="changeBaseService">{{ item.value }}</a-select-option>
              </a-select>
              <a-select v-decorator="['baseService2']" style="width: 208px" placeholder="请选择服务">
                <a-select-option
                  @click="changeBaseService2"
                  v-for="(item, index) in billingForResourceData.selectObj.currentList"
                  :value="item.resourceId"
                  :key="index"
                >{{ item.resourceName }}</a-select-option>
              </a-select>
            </a-form-item>
            
            <a-form-item label="服务列表：">
              <a-table
                class="table_sty"
                :columns="columnsQPS"
                :data-source="billingForResourceData.billingInformationList"
                :pagination="pagination"
                :row-selection="rowSelection"
                :loading="serve_loading">
                <span slot="price" slot-scope="text, row" class="warning_col">{{ row.price }}</span>
                <span slot="purchaseQuantity" slot-scope="text, resource, index">
                  <a-input-number v-model="billingForResourceData.billingInformationList[index]['purchaseQuantity']" :min="1" :max="10" @change="onChange" />
                </span>
              </a-table>
            </a-form-item>
            <a-form-item label="购买费用：">
              <span class="warning_col">{{ totalPrice | rmbSymbol }}</span>
            </a-form-item>
            <a-form-item><a-button type="primary" icon="shopping-cart" @click="handleSubmit">添加到购物车</a-button></a-form-item>
          </a-form>
        </div>
        <div v-else-if="typeRadioValue == '1'">
          <div class="pay_tit_txt">购买方式：</div>
          <div class="pay_type_radio">
            <a-radio-group v-model="typeRadioValueByType" button-style="solid" @change="changePurchaseType">
              <a-radio-button value="1">按天购买</a-radio-button>
              <a-radio-button value="2">按月购买</a-radio-button>
            </a-radio-group>
          </div>

<!-- 按天购买 -->
          <div v-if="typeRadioValueByType == '1'">
            <a-form :form="form2" layout="vertical" class="pay_type_form mt20">
              <a-form-item label="选择接口：">
                <a-select v-decorator="['baseService']" class="mr20" placeholder="请选择服务" style="width: 208px">
                  <a-select-option @click="changeBaseServiceQPS" v-for="(item, index) in billingForQPSResourceData.selectObj.baseList" :value="item.key" :key="index" >{{ item.value }}</a-select-option>
                </a-select>
                <a-select v-decorator="['baseService2']" style="width: 208px" placeholder="请选择服务">
                  <a-select-option @click="changeBaseService2QPS" v-for="(item, index) in billingForQPSResourceData.selectObj.currentList" :value="item.resourceId" :key="index" >{{ item.resourceName }}</a-select-option>
                </a-select>
              </a-form-item>
              <a-form-item label="服务单价：">
                <a-table class="table_sty" :columns="columnsDay" :data-source="billingForQPSResourceData.billingInformationList" :pagination="pagination"></a-table>
              </a-form-item>
              <a-form-item label="购买天数："><a-input-number v-decorator="['qpsDayNumber']" @change="handleTochangeQPSDayNumber" :min="1" :max="1825"/></a-form-item>
              <a-form-item label="起始日期："><a-date-picker :disabled-date="disabledDate" v-decorator="['qpsDayStatDate']" /></a-form-item>
              <a-form-item label="购买数量（QPS）："><a-input-number v-decorator="['qpsDayBuyNumber']" @change="handleTochangeQPSBuyNumber" :min="1" :max="100" /></a-form-item>
              <a-form-item label="购买费用："><span>{{ totalPriceDay | rmbSymbol }}</span></a-form-item><a-form-item>
                <a-button type="primary" icon="shopping-cart" @click="handleSubmitQPSDay">添加到购物车</a-button>
              </a-form-item>
            </a-form>
          </div>

<!-- 按月购买 -->
          <div v-else>
            <a-form :form="form3" layout="vertical" class="pay_type_form mt20">
              <a-form-item label="选择接口：">
                <a-select v-decorator="['baseService']" placeholder="请选择服务" class="mr20" style="width: 208px;">
                  <a-select-option @click="changeBaseServiceQPSForMonth" v-for="(item, index) in billingForQPSResourceData.selectObj.baseList" :value="item.key" :key="index" >{{ item.value }}</a-select-option>
                </a-select>
                <a-select v-decorator="['baseService2']" style="width: 208px" placeholder="请选择服务">
                  <a-select-option @click="changeBaseService2QPS" v-for="(item, index) in billingForQPSResourceData.selectObj.currentList" :value="item.resourceId" :key="index" >{{ item.resourceName }}</a-select-option></a-select>
              </a-form-item>
              <a-form-item label="服务单价：">
                <a-table class="table_sty" :columns="columnsDay" :data-source="billingForQPSResourceData.billingInformationList" :pagination="pagination"></a-table>
              </a-form-item>
              <a-form-item label="购买月数：">
                <a-input-number v-decorator="['qpsMonthNumber']" @change="handleTochangeQPSMonthNumber" :min="1" :max="60" />
              </a-form-item>
              <a-form-item label="起始日期："><a-date-picker :disabled-date="disabledDate" v-decorator="['qpsMonthStatDate']" /></a-form-item>
              <a-form-item label="购买数量（QPS）："><a-input-number v-decorator="['qpsMonthBuyNumber']" @change="handleTochangeQPSMonthBuyNumber" :min="0" :max="100" /></a-form-item>
              <a-form-item label="购买费用："> <span>{{ totalPriceMonth | rmbSymbol }}</span></a-form-item>
              <a-form-item><a-button type="primary" icon="shopping-cart" @click="handleSubmitQPSMonth">添加到购物车</a-button>
              </a-form-item>
            </a-form>
          </div>
        </div>
      </div>
    </div>

<!-- 确认订单 -->
    <div class="pay_box box_style" v-show="stepValue == 1">
      <div class="pay_confirm_order">
        <a-table class="table_sty" :columns="columnsConfirmOrder" :data-source="shoppingList" :pagination="pagination">
          <span slot="purchaseQuantity" slot-scope="text, row">{{ row.chargePlanIdTitle === '按QPS购买' ? `${ text }QPS` : `${ text }个` }}</span>
          <span slot="price" slot-scope="text"><span>￥{{ text }}</span></span>
          <span slot="orderAmount" slot-scope="text"><span>￥{{ text }}</span>
          </span>
        </a-table>
        <div class="pay_confirm_money">
          <div class="product_money"><span>产品金额：</span><span>￥{{ shoppingListPrice }}</span></div>
          <div class="product_discount"><span>折扣金额：</span><span>-￥0.00</span></div>
          <div class="product_actual"><span>实付金额：</span> <span style="color: #faad14">￥{{ shoppingListPrice }}</span></div>
        </div>
        <div class="pay_confirm_protocol"><span class="pointer">《辨识云线上订购协议》</span>
        </div>
        <div class="pay_confirm_action">
          <div class="action_inner">
            <div class="back mr10 pointer" @click="stepValue = 0, drawerVisible = true" v-show="!goToSubmitOrder_loading">返回修改</div>
            <a-button type="danger" @click="goToSubmitOrder" :loading="goToSubmitOrder_loading">确认订单</a-button>
          </div>
        </div>
      </div>
    </div>
    <div class="pay_box box_style" v-show="stepValue == 2">
      <div class="pay_order">
        
<!-- 订单支付 -->
        <a-alert v-if="payFlag" message="您的订单已提交，请支付。" :closable="true" type="success" show-icon />
        <a-alert
          v-else
          message="订单状态：未支付请于10天内前完成支付，若未及时支付或资源在此期间释放，系统将自动取消订单。"
          type="warning"
          show-icon
        />
        <div style="width: 100%; height: 20px" v-if="!payFlag"></div>
        <pay-info v-if="!payFlag" :order-number="orderNumber" :order-status="payFlag" :createTime="orderCreateTime" :orderTime="orderPayTime"></pay-info>
        <div class="table_tit_txt pay_order_title">订单详情</div>
        <a-table class="table_sty" :columns="columnsPayOrder" :data-source="shoppingList" :pagination="pagination"></a-table>
        <div class="pay_confirm_money"><div class="product_money"><span>产品金额：</span><span>￥{{ shoppingListPrice }}</span></div>
          <div class="product_discount"><span>折扣金额：</span><span>-￥0.00</span></div>
          <div class="product_actual"><span>折扣金额：</span> <span style="color: #faad14">￥{{ shoppingListPrice }}</span></div>
        </div>
        <div class="pay_type">
          <div class="table_tit_txt pay_type_title">支付方式</div>
          <a-radio-group v-model="payTypeValue" class="pay_type_radio">
            <img src="@/assets/image/wechatpay.png" /><a-radio :value="1">微信支付</a-radio>
            <img src="@/assets/image/alipay.png" /><a-radio :value="2">支付宝支付</a-radio>
          </a-radio-group>
          <div class="pay_type_action">
            <div class="pay_type_action_inner">
              <span class="back">返回订单列表</span>
              <span class="cancel">取消订单</span>
              <a-button type="danger" @click="goToPay"> 立即支付 </a-button>
            </div>
          </div>
        </div>
        <!-- <div class="pay_confirm_action">
          <div class="action_inner">
            <div class="back">返回修改</div>
            <a-button type="danger" @click="goToSubmitOrder">确认订单</a-button>
          </div>
        </div> -->
      </div>
    </div>
    <div class="pay_box box_style" v-show="stepValue == 3">
      <div class="pay_result">
        <a-result status="success" title="您已成功购买并开通服务！">
          <template #extra>
            <a-button key="console" type="primary">返回资源列表</a-button>
            <a-button key="buy">再次购买</a-button>
            <a-button key="see">查看订单列表</a-button>
          </template>
        </a-result>
        <a-divider>订单信息</a-divider>
        <pay-info :order-number="orderNumber" :order-status="payFlag" :createTime="orderCreateTime" :orderTime="orderPayTime"></pay-info>
        <div class="table_tit_txt pay_result_info">订单详情</div>
        <a-table class="table_sty" :columns="columnsConfirmOrder" :data-source="shoppingList" :pagination="pagination">
          <span slot="price" slot-scope="text"> <span>￥{{ text }}</span> </span>
        </a-table>
        <div class="pay_confirm_money">
          <div class="product_money"> <span>产品金额：</span> <span>￥{{ shoppingListPrice }}</span></div>
          <div class="product_discount"> <span>折扣金额：</span> <span>-￥0.00</span></div>
          <div class="product_actual"> <span>折扣金额：</span> <span style="color: #faad14">￥{{ shoppingListPrice }}</span></div>
        </div>
      </div>
    </div>
    <div class="pay_box box_style" style="background: #e3e8f6" v-show="stepValue == 4">
      <div class="pay_container">
        <a-icon
          @click="goToPayPage"
          style="
            font-size: 24px;
            color: #1890ff;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            left: 25px;
          "
          type="arrow-left"
        />
        <div class="pay_container_logo">
          <img :src="payTypeValue == '1' ? wxPayLogo : aliPayLogo" />
          <span>{{ payTypeValue == "1" ? "微信支付" : "支付宝支付" }}</span>
        </div>
      </div>
      <div class="pay_container_info">
        <div class="pay_info_top">支付金额<span style="color: red">￥{{ payAmountInfo.amount }}</span >，请使用{{ payTypeValue == "1" ? "微信" : "支付宝" }}扫描下方二维码完成支付</div>
        <div class="pay_info_mid">
          <div class="left">
            <img :src="'http://' + payAmountInfo.codeUrl" style="display: inline-block; width: 100%; height: 100%" />
          </div>
          <div class="right">
            <div class="right_item">
              <span>商家名称：</span><span class="right_name">{{ payAmountInfo.companyName }}</span>
            </div>
            <div class="right_item">
              <span>商品名称：</span><span class="right_name">{{ payAmountInfo.orderSubject }}</span>
            </div>
            <div class="right_item">
              <span>交易单号：</span><span class="right_name">{{ payAmountInfo.orderNumber }}</span>
            </div>
            <div class="right_item">
              <span>创建时间：</span><span class="right_name">{{ payAmountInfo.createTime }}</span>
            </div>
          </div>
        </div>
        <div class="pay_info_bottom">客服电话：4008-777-818</div>
      </div>
    </div>

<!-- 购物车 -->
    <a-drawer
      class="pay_drawer"
      placement="right"
      :closable="true"
      :visible="drawerVisible"
      :after-visible-change="afterVisibleChange"
      @close="onClose"
    >
      <div slot="title">
        <span>购物车</span>
        <span class="drawer_title">共{{ shoppingList.length }}项</span>
      </div>
      <div class="cart_item_fa">
        <div class="cart_item" v-for="(item, index) in shoppingList" :key="index">
          <div class="cart_item_title">
            <span>{{ item.titleName }}</span>
            <span class="clear" @click="clearShoppingList(index)">清除</span>
          </div>
          <div class="cart_item_option">
            <span class="cart_item_option_left">购买规格</span>
            <span class="cart_item_option_right">{{ item.chargePlanId == 1 ? item.purchaseType : item.quantity / 10000 }}{{ item.chargePlanId == 1 ? '' : "万次" }}</span></div>
          <div class="cart_item_option">
            <span class="cart_item_option_left">购买数量</span>
            <span class="cart_item_option_right">{{ item.purchaseQuantity }}个</span>
          </div>
          <div class="cart_item_option">
            <span class="cart_item_option_left">购买费用</span>
            <span class="cart_item_option_right">￥ {{ item.orderAmount }}</span>
          </div>
        </div>
      </div>
      <div class="cart_bottom">
        <span class="cart_bottom_total">总计：{{ shoppingListPrice }}元</span>
        <span class="theme_col pointer" v-show="shoppingList.length !== 0" @click="shoppingList = [], drawerVisible = false">清空</span>
        <a-button type="primary" @click="goToSettlement">去结算</a-button>
      </div>
    </a-drawer>
  </a-spin>
  </div>
</template>

<script>
import { Modal } from "ant-design-vue"
import moment from 'moment'
import PayInfo from "./components/payInfo.vue"
import {
  billingForResourcePurchasesAndCalls,
  resourcePurchaseQpsBilling,
  resourceCallVolumeBillingInformation,
  resourceQpsChargingInformation,
  placeOrder,
  orderPayment,
  queryOrder
} from "@/api/face-recognition/resourceManage"

import wxPayLogo from "@/assets/image/wechatpay.png"
import aliPayLogo from "@/assets/image/alipay.png"

const columnsQPS = [
  { title: "资源包", dataIndex: "unitPriceName", key: "unitPriceName" },
  { title: "价格（元）", dataIndex: "price", key: "price", scopedSlots: { customRender: "price" }},
  { title: "购买数量", dataIndex: "purchaseQuantity", key: "purchaseQuantity", scopedSlots: { customRender: "purchaseQuantity" }},
]

const columnsDay = [
  { title: "QPS数量", dataIndex: "qpsNumbers", key: "qpsNumbers" },
  { title: "0<n≤10", dataIndex: "from0to10", key: "from0to10" },
  { title: "10<n≤50", dataIndex: "from10to50", key: "from10to50" },
  { title: "50<n≤100", dataIndex: "from50to100", key: "from50to100" },
  { title: "100<n", dataIndex: "from100", key: "from100" },
]

const columnsConfirmOrder = [
  { title: "产品类型", dataIndex: "chargePlanIdTitle", key: "chargePlanIdTitle" },
  { title: "产品名称", dataIndex: "titleName", key: "titleName" },
  { title: "产品规格", dataIndex: "unitPriceName", key: "unitPriceName" },
  { title: "产品数量", dataIndex: "purchaseQuantity", key: "purchaseQuantity", scopedSlots: { customRender: "purchaseQuantity" } },
  { title: "购买时长", dataIndex: "purchaseTime", key: "purchaseTime" },
  { title: "单价", dataIndex: "price", key: "price", scopedSlots: { customRender: "price" } },
  { title: "计费方式", dataIndex: "billingMethod", key: "billingMethod", scopedSlots: { customRender: 'billingMethod' } },
  { title: "订单金额", dataIndex: "orderAmount", key: "orderAmount", scopedSlots: { customRender: "orderAmount" } },
]

const columnsPayOrder = [
  { title: "订单号", dataIndex: "orderNumber", key: "orderNumber", },
  { title: "产品类型", dataIndex: "chargePlanIdTitle", key: "chargePlanIdTitle" },
  { title: "产品名称", dataIndex: "titleName", key: "titleName" },
  { title: "产品规格", dataIndex: "unitPriceName", key: "unitPriceName" },
  { title: "产品数量", dataIndex: "purchaseQuantity", key: "purchaseQuantity" },
  { title: "购买时长", dataIndex: "purchaseTime", key: "purchaseTime" },
  { title: "单价", dataIndex: "price", key: "price", scopedSlots: { customRender: "price" }},
  { title: "计费方式", dataIndex: "billingMethod", key: "billingMethod" },
  { title: "订单金额", dataIndex: "orderAmount", key: "orderAmount", scopedSlots: { customRender: "orderAmount" } },
]

export default {
  data() {
    return {
      spinning: true,
      goToSubmitOrder_loading: false,
      serve_loading: false,
      wxPayLogo,
      aliPayLogo,
      payAmountInfo: {
        amount: "0",
        codeUrl: '',
        companyName: '',
        createTime: '',
        orderNumber: '',
        orderSubject: '',
      },
      shoppingList: [],
      payTypeValue: 1,
      stepValue: 0,
      drawerVisible: false,
      billingForResourceData: {
        selectObj: {
          baseList: [],
          specificList: [],
          currentList: null,
        },
        billingInformationList: [],
      },
      billingForQPSResourceData: {
        selectObj: {
          baseList: [],
          specificList: [],
          currentList: null,
        },
        billingInformationList: [],
      },
      qpsResource: {
        resourceId: '',
        purchaseType: '',
      },
      columnsQPS,
      columnsDay,
      columnsConfirmOrder,
      columnsPayOrder,
      selectedRowKeys: [], // Check here to configure the default column
      selectedRows: [],
      pagination: false,
      typeRadioValue: "2",
      typeRadioValueByType: "1",
      orderNumber: '',
      // 计算qps day
      qpsDayNumberO: 1,
      qpsBuyNumberO: 1,
      // month
      qpsMonthNumberO: 1,
      qpsMonthBuyNumberO: 1,
      payFlag: true,
      orderCreateTime: '',
      orderPayTime: '',
    }
  },
  components: {
    PayInfo,
  },
  watch: {
    stepValue(newV, oldV) {
      if (newV == 2 && !this.payFlag) {
        const modal = Modal.info();
        modal.update({
          title: "付款完成前不要关闭页面",
          content: "请在页面完成付款，如付款遇到问题请致电：15542459800",
          okText: "已付款",
          onOk: () => {
            // this.stepValue = 3;
          },
        });
      }
    },
  },
  filters: {
    rmbSymbol(value) {
      return `￥${value}`;
    },
  },
  computed: {
    shoppingListPrice() {
      let price = 0
      if (this.shoppingList.length == 0) {
        price = 0
      } else {
        this.shoppingList.forEach((item) => {
          price += item.orderAmount
        })
      }
      return price
    },
    // drawerTitle() {
    //   let { selectedRows } = this;
    //   let length = selectedRows.length;
    //   return length;
    // },
    rowSelection() {
      const { selectedRowKeys } = this;
      return {
        selectedRowKeys,
        onChange: (selectedRowKeys) => {
          // console.log("selectedRowKeys changed: ", selectedRowKeys);
          this.selectedRowKeys = selectedRowKeys;
        },
        onSelect: (record, selected, selectedRows) => {
          // console.log(record, selected, selectedRows);
          this.selectedRows = selectedRows
          this.selectedRows.forEach((item) => {
            item.titleName = this.form.getFieldsValue([
              "baseService2",
            ]).baseService2;
            item.chargePlanIdTitle = "按计量购买";
            item.chargePlanId = +this.typeRadioValue;
            item.startTime = new Date().getTime()
            item.endTime = new Date().getTime()
            item.purchaseTime = "--"
            item.billingMethod = "--"
            item.orderAmount = item.price * item.purchaseQuantity;
          });
          // this.shoppingList = this.selectedRows;
        },
        onSelectAll: (selected, selectedRows, changeRows) => {
          // console.log(selected, selectedRows, changeRows);
          this.selectedRows = selectedRows;
          this.selectedRows.forEach((item) => {
            item.titleName = this.form.getFieldsValue([
              "baseService2",
            ]).baseService2;
            item.chargePlanIdTitle = "按计量购买";
            item.chargePlanId = +this.typeRadioValue;
            item.startTime = new Date().getTime()
            item.endTime = new Date().getTime()
            item.purchaseTime = "--"
            item.billingMethod = "--"
            item.orderAmount = item.price * item.purchaseQuantity;
          });
          // this.shoppingList = this.selectedRows;
        },
      };
    },
    totalPrice() {
      let { selectedRows } = this
      let total = 0;
      if (selectedRows.length != 0) {
        for (let i = 0; i < selectedRows.length; i++) {
          let selectedRow = selectedRows[i]
          let nowPrice = selectedRow.price * selectedRow.purchaseQuantity;
          total += nowPrice;
        }
        return total;
      }
      return total;
    },
    totalPriceDay() {
      let price = 0
      if (this.qpsBuyNumberO > 0 && this.qpsBuyNumberO <= 10) {
        price = 30
      } else if (this.qpsBuyNumberO > 10 && this.qpsBuyNumberO <= 50) {
        price = 25
      } else if (this.qpsBuyNumberO > 50 && this.qpsBuyNumberO <= 100) {
        price = 20
      } else if (this.qpsBuyNumberO > 100) {
        price = 15
      }
      return this.qpsDayNumberO * this.qpsBuyNumberO * price
    },
    totalPriceMonth() {
      let price = 0
      if (this.qpsMonthBuyNumberO > 0 && this.qpsMonthBuyNumberO <= 10) {
        price = 150
      } else if (
        this.qpsMonthBuyNumberO > 10 &&
        this.qpsMonthBuyNumberO <= 50
      ) {
        price = 200
      } else if (
        this.qpsMonthBuyNumberO > 50 &&
        this.qpsMonthBuyNumberO <= 100
      ) {
        price = 250
      } else if (this.qpsMonthBuyNumberO > 100) {
        price = 300
      }
      return this.qpsMonthNumberO * this.qpsMonthBuyNumberO * price
    },
  },
  methods: {
    timestampToTime(timestamp) {
      let newTimestamp = parseInt(timestamp)
      let date = new Date(newTimestamp) //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      let Y = date.getFullYear() + "-"
      let M =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1) + "-"
          : date.getMonth() + 1 + "-"
      let D =
        date.getDate() < 10 ? "0" + date.getDate() + " " : date.getDate() + " "
      let h =
        date.getHours() < 10
          ? "0" + date.getHours() + ":"
          : date.getHours() + ":"
      let m =
        date.getMinutes() < 10
          ? "0" + date.getMinutes() + ":"
          : date.getMinutes() + ":"
      let s =
        date.getSeconds() < 10
          ? "0" + date.getSeconds() + ''
          : date.getSeconds() + ''
      return Y + M + D + h + m + s
    },
    async goToPayPage() {
      // 调用是否支付的接口
      await this.handleQueryOrder();
      if (this.payFlag) {
        // 支付成功
        this.stepValue = 3
      } else {
        this.stepValue = 2
      }
    },
    async handleQueryOrder() {
      let res;
      try {
        res = await queryOrder(this.orderNumber, this.payTypeValue)
      } catch (e) {
        this.payFlag = false
      }
      if (res.code == 0) {
        this.payFlag = true
      } else {
        this.payFlag = false
      }
    },
    // 计费 qps价格
    handleTochangeQPSDayNumber(e) {
      this.qpsDayNumberO = e;
    },
    handleTochangeQPSBuyNumber(e) {
      this.qpsBuyNumberO = e;
    },
    handleTochangeQPSMonthNumber(e) {
      this.qpsMonthNumberO = e;
    },
    handleTochangeQPSMonthBuyNumber(e) {
      this.qpsMonthBuyNumberO = e;
    },
    // 修改购买方式 天 月
    async changePurchaseType(e) {
      if (e.target.value == "1") {
        this.qpsResource.purchaseType = 1;
        this.$nextTick(() => {
          this.form2.setFieldsValue({
            baseService:
              this.billingForQPSResourceData.selectObj.baseList[0]["value"],
               baseService2:
              this.billingForQPSResourceData.selectObj.currentList[0]["resourceName"],
              qpsDayNumber: 1,
              qpsDayBuyNumber: 1,
          })
        })
      } else {
        this.qpsResource.purchaseType = 2
        this.$nextTick(() => {
          this.form3.setFieldsValue({
            baseService:
              this.billingForQPSResourceData.selectObj.baseList[0]["value"],
            baseService2:
              this.billingForQPSResourceData.selectObj.currentList[0]["resourceName"],
            qpsMonthNumber: 1,
            qpsMonthBuyNumber: 1,
          });
        });
      }
      await this.getResourceQpsChargingInformation(
        this.qpsResource.resourceId,
        this.qpsResource.purchaseType
      );
    },
    clearShoppingList(index) {
      this.shoppingList.splice(index, 1)
    },
    // select
    async changeBaseService(e) {
      let { key } = e
      this.billingForResourceData.selectObj.currentList = this.billingForResourceData.selectObj.specificList[key]
      this.$nextTick(() => {
        this.form.setFieldsValue({
          baseService2: this.billingForResourceData.selectObj.currentList[0]["resourceName"]
        })
      })
      let id = this.billingForResourceData.selectObj.currentList[0]["resourceId"]
      await this.getResourceCallVolumeBillingInformation(id)
    },
    async changeBaseService2(e) {
      this.getResourceCallVolumeBillingInformation(e.key)
    },
    // qps select
    async changeBaseServiceQPS(e) {
      let { key } = e;
      this.billingForQPSResourceData.selectObj.currentList =
        this.billingForQPSResourceData.selectObj.specificList[key]
      this.$nextTick(() => {
        this.form2.setFieldsValue({
          baseService2:
            this.billingForQPSResourceData.selectObj.currentList[0]["resourceName"],
        })
      })
      this.qpsResource.resourceId =
        this.billingForQPSResourceData.selectObj.currentList[0]["resourceId"]
      await this.getResourceQpsChargingInformation(this.qpsResource.resourceId, this.qpsResource.purchaseType)
    },
    async changeBaseService2QPS(e) {
      this.qpsResource.resourceId = e.key;
      await this.getResourceQpsChargingInformation(this.qpsResource.resourceId, this.qpsResource.purchaseType)
    },
    // qps select for month
    async changeBaseServiceQPSForMonth(e) {
      let { key } = e;
      this.billingForQPSResourceData.selectObj.currentList =
        this.billingForQPSResourceData.selectObj.specificList[key];
      this.$nextTick(() => {
        this.form3.setFieldsValue({
          baseService2:
            this.billingForQPSResourceData.selectObj.currentList[0]["resourceName"],
        })
      })
      this.qpsResource.resourceId =
        this.billingForQPSResourceData.selectObj.currentList[0]["resourceId"]
      await this.getResourceQpsChargingInformation(this.qpsResource.resourceId, this.qpsResource.purchaseType)
    },
    async handleToChangeTypeRadioValue(e) {
      if (e.target.value == "2") {
        await this.getBillingForResourcePurchasesAndCalls()
      } else {
        await this.getResourcePurchaseQpsBilling()
      }
    },
    // 获取调用量计费信息接口
    async getResourceCallVolumeBillingInformation(data) {
      this.serve_loading = true
      let res = await resourceCallVolumeBillingInformation(data)
      if (res.code == 0) {
        this.serve_loading = false
        res.data.forEach((item, index) => {
          item.purchaseQuantity = 1
          item.key = index
        })
        this.billingForResourceData.billingInformationList = res.data
      }
    },
    
// 获取调用量计费信息接口qps
    async getResourceQpsChargingInformation(id, type) {
      this.spinning = true
      let res = await resourceQpsChargingInformation(id, type)
      if (res.code == 0) {
        this.spinning = false
        let billingInformationListNew = {
          qpsNumbers: type == 1 ? "单价（元/天/QPS）" : "单价（元/月/QPS）",
        }
        res.data.forEach((item, index) => {
          if (index == 0) {
            billingInformationListNew.from0to10 = item.price
          } else if (index == 1) {
            billingInformationListNew.from10to50 = item.price
          } else if (index == 2) {
            billingInformationListNew.from50to100 = item.price
          } else if (index == 3) {
            billingInformationListNew.from100 = item.price
          }
        })
        this.billingForQPSResourceData.billingInformationList = [
          billingInformationListNew,
        ]
      }
    },
    
// 获取计费方式信息
    async getBillingForResourcePurchasesAndCalls() {
      this.spinning = true
      let res = await billingForResourcePurchasesAndCalls({
          resourceId: this.$route.query.resourceId,
          serviceId: 1,
        })
 
      if (res.code == 0) {
        this.spinning = false
        res.data.billingInformationList.forEach((item, index) => {
          item.purchaseQuantity = 1
          item.key = index
        })
        res.data.selectObj = {
          baseList: [],
          specificList: [],
          currentList: null,
        }
        res.data.labelServiceResourceList.forEach((item, index) => {
          res.data.selectObj.baseList.push({
            value: item.labelName,
            key: index
          })
          res.data.selectObj.specificList.push(item.resourceList)
        })
        res.data.selectObj.currentList = res.data.selectObj.specificList[0]
        this.billingForResourceData = res.data

        this.$nextTick(() => {
          this.form.setFieldsValue({
            baseService: this.billingForResourceData.selectObj.baseList[0]["value"],
            baseService2: this.billingForResourceData.selectObj.currentList[0]["resourceName"],
          })
        })
      }
    },
    // 获取QPS计费方式信息
    async getResourcePurchaseQpsBilling() {
      this.spinning = true
      let res = await resourcePurchaseQpsBilling({
          resourceId: this.$route.query.resourceId,
          serviceId: 1,
        })
      if (res.code == 0) {
        this.spinning = false
        res.data.selectObj = {
          baseList: [],
          specificList: [],
          currentList: null,
        }
        res.data.labelServiceResourceList.forEach((item, index) => {
          res.data.selectObj.baseList.push({
            value: item.labelName,
            key: index,
          });
          res.data.selectObj.specificList.push(item.resourceList);
        });
        res.data.selectObj.currentList = res.data.selectObj.specificList[0];
        let billingInformationListNew = {
          qpsNumbers: "单价（元/天/QPS）",
        };
        res.data.billingInformationList.forEach((item, index) => {
          if (index == 0) {
            billingInformationListNew.from0to10 = item.price
          } else if (index == 1) {
            billingInformationListNew.from10to50 = item.price
          } else if (index == 2) {
            billingInformationListNew.from50to100 = item.price
          } else if (index == 3) {
            billingInformationListNew.from100 = item.price
          }
        })
        res.data.billingInformationList = [billingInformationListNew]
        this.qpsResource.resourceId =
          res.data.selectObj.currentList[0].resourceId
        this.billingForQPSResourceData = res.data;
        this.qpsResource.purchaseType = 1;

        this.$nextTick(() => {
          this.form2.setFieldsValue({
            baseService:
              this.billingForQPSResourceData.selectObj.baseList[0]["value"],
            baseService2:
              this.billingForQPSResourceData.selectObj.currentList[0]["resourceName"],
            qpsDayNumber: 1,
            qpsDayBuyNumber: 1,
          })
        })
      }
    },

// 支付
    async orderPaymentService() {
      let res = await orderPayment({
          orderNumber: this.orderNumber,
          paymentMethod: this.payTypeValue,
        })
 
      if (res.code == 0) {
        this.orderPayTime = this.timestampToTime(new Date().getTime())
        this.stepValue = 4
        this.payAmountInfo = Object.assign(this.payAmountInfo, res.data)
      }
    },
    async goToPay() {
      await this.orderPaymentService()
    },

// 提交订单
    async goToSubmitOrder() {
      this.goToSubmitOrder_loading = true
      // this.goToSubmitOrder = this.handleToChangeTypeRadioValue  刷新调用量

      let data = JSON.parse(JSON.stringify(this.shoppingList))
      let newData = {
        orderDetailList: data,
        userId: "admin",
        whetherReceipt: 0,
      }
      let res = await placeOrder(newData)
       data.forEach((item) => {
         item.quantity = item.purchaseQuantity
         item.serviceId = "1"
       })

      if (res.code == 0) {
        this.orderCreateTime = this.timestampToTime(new Date().getTime())
        this.stepValue = 2
        this.orderNumber = res.data
        this.shoppingList.forEach((item) => {
          item.orderNumber = res.data
        })
      } else {
        this.$msg.error('订单提交失败，请重试！')
      }
       this.goToSubmitOrder_loading = false
    },

// 结算
    goToSettlement() {
      this.stepValue = 1
      this.drawerVisible = false
    },
    afterVisibleChange(val) {
      console.log("visible", val)
    },
    onClose() {
      this.drawerVisible = false
    },
    onChange(e) {
      console.log("changed", e)
    },
    handleSubmit(e) {
      // https://www.cnblogs.com/dafei4/p/13424918.html
      // console.log(
      //   "xxxxx",
      //   this.form.getForm("validate_other").getFieldsValue()
      // );
      // console.log("xxxx", this.selectedRowKeys, this.selectedRows);
      let selectRes = this.form.getForm("validate_other").getFieldsValue()
      let checkSelect = true
      Object.keys(selectRes).forEach((select) => {
        if (selectRes[select] == undefined) {
          checkSelect = false
        }
      });
      this.selectedRows.forEach((item) => {
        item.only = new Date().getTime()
        this.shoppingList.push(item)
      });
      if (!this.selectedRowKeys.length || !checkSelect) {
        this.$msg.warning("请添加服务以及数量！")
      } else {
        this.selectedRowKeys = []
        this.selectedRows = []
        this.drawerVisible = true
      }
      //   e.preventDefault();
      //   this.form.validateFields((err, values) => {
      //     if (!err) {
      //       console.log('Received values of form: ', values);
      //     }
      //   });
    },
    handleSubmitQPSDay(e) {
      let selectRes = this.form2.getForm("validate_qps_day").getFieldsValue();
      let checkSelect = true
      Object.keys(selectRes).forEach((select) => {
        if (selectRes[select] == undefined) {
          checkSelect = false
        }
      });
      if (!checkSelect) {
        this.$msg.warning("请选择始日期！")
      } else {
        let indexO = 0
        if (this.qpsBuyNumberO > 0 && this.qpsBuyNumberO <= 10) {
          indexO = 0
        } else if (this.qpsBuyNumberO > 10 && this.qpsBuyNumberO <= 50) {
          indexO = 1
        } else if (this.qpsBuyNumberO > 50 && this.qpsBuyNumberO <= 100) {
          indexO = 2
        } else if (this.qpsBuyNumberO > 100) {
          indexO = 3
        }
        let qpsInfo = [
          { price: "30", purchaseType: "按天购买", qpsRange: "0<QPS<=10", quantity: -1, resourceId: 1, unitPriceId: 1, unitPriceName: "0<QPS<=10按天购买" },
          { price: "25", purchaseType: "按天购买", qpsRange: "10<QPS<=50", quantity: -1, resourceId: 1, unitPriceId: 2, unitPriceName: "10<QPS<=50按天购买" },
          { price: "20", purchaseType: "按天购买", qpsRange: "50<QPS<=100", quantity: -1, resourceId: 1, unitPriceId: 3, unitPriceName: "50<QPS<=100按天购买" },
          { price: "15", purchaseType: "按天购买", qpsRange: "100<QPS", quantity: -1, resourceId: 1, unitPriceId: 4, unitPriceName: "100<QPS按天购买" },
        ];
        let otherInfo = qpsInfo[indexO];
        let shoppingData = {
          only: new Date().getTime(),
          titleName: this.form2.getFieldsValue(["baseService2"]).baseService2,
          chargePlanIdTitle: "按QPS购买",
          chargePlanId: +this.typeRadioValue,
          startTime: new Date().getTime(),
          endTime: new Date().getTime(),
          purchaseTime: this.qpsDayNumberO + '天',
          billingMethod: '按天',
          orderAmount: this.totalPriceDay,
          purchaseQuantity: this.qpsBuyNumberO,
          purchaseDayQuantity: this.qpsBuyNumberO,
        };
        shoppingData = Object.assign(shoppingData, otherInfo)
        this.shoppingList.push(shoppingData)
        this.drawerVisible = true
      }
    },
    handleSubmitQPSMonth(e) {
      let selectRes = this.form3.getForm("validate_qps_month").getFieldsValue();
      let checkSelect = true
      Object.keys(selectRes).forEach((select) => {
        if (selectRes[select] == undefined) {
          checkSelect = false
        }
      })
      if (!checkSelect) {
        this.$msg.warning("请选择开始日期！")
      } else {
        let indexO = 0
        if (this.qpsMonthBuyNumberO > 0 && this.qpsMonthBuyNumberO <= 10) {
          indexO = 0
        } else if (
          this.qpsMonthBuyNumberO > 10 &&
          this.qpsMonthBuyNumberO <= 50
        ) {
          indexO = 1
        } else if (
          this.qpsMonthBuyNumberO > 50 &&
          this.qpsMonthBuyNumberO <= 100
        ) {
          indexO = 2
        } else if (this.qpsMonthBuyNumberO > 100) {
          indexO = 3
        }
        let qpsInfo = [
          { price: "150", purchaseType: "按月购买", qpsRange: "100<QPS", quantity: -1, resourceId: 1, unitPriceId: 5, unitPriceName: "100<QPS按月购买" },
          { price: "200", purchaseType: "按月购买", qpsRange: "50<QPS<=100", quantity: -1, resourceId: 1, unitPriceId: 6, unitPriceName: "50<QPS<=100按月购买" },
          { price: "250", purchaseType: "按月购买", qpsRange: "10<QPS<=50", quantity: -1, resourceId: 1, unitPriceId: 7, unitPriceName: "10<QPS<=50按月购买" },
          { price: "300", purchaseType: "按月购买", qpsRange: "0<QPS<=10", quantity: -1, resourceId: 1, unitPriceId: 8, unitPriceName: "0<QPS<=10按月购买" },
        ]
        let otherInfo = qpsInfo[indexO]
        let shoppingData = {
          only: new Date().getTime(),
          titleName: this.form3.getFieldsValue(["baseService2"]).baseService2,
          chargePlanIdTitle: "按QPS购买",
          chargePlanId: +this.typeRadioValue,
          startTime: new Date().getTime(),
          endTime: new Date().getTime(),
          purchaseTime: this.qpsMonthNumberO + '个月',
          billingMethod: "按月",
          orderAmount: this.totalPriceMonth,
          purchaseQuantity: this.qpsMonthNumberO,
          purchaseDayQuantity: this.qpsMonthBuyNumberO,
        };
        shoppingData = Object.assign(shoppingData, otherInfo)
        this.shoppingList.push(shoppingData)
        this.drawerVisible = true
      }
    },
     disabledDate(current) {
      return current && current < moment().subtract(1, "days")
    },
  },
  beforeCreate() {
    this.form = this.$form.createForm(this, { name: "validate_other" })
    this.form2 = this.$form.createForm(this, { name: "validate_qps_day" })
    this.form3 = this.$form.createForm(this, { name: "validate_qps_month" })
  },
  created() {
    // 进入页面后获取计费方式等信息
    this.getBillingForResourcePurchasesAndCalls();
  },
}
</script>